<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-resource</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-resource-1.3.4.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" @click="getInfo" value="get请求" />
        <input type="button" @click="postInfo" value="post请求" />
        <input type="button" @click="jsonInfo" value="json请求" />
    </div>

    <script>
            var vue = new Vue({
            el: '#app',
            data:{

            },
            methods:{
                //测试地址：http://jsonplaceholder.typicode.com/
                getInfo(){
                  this.$http.get('http://jsonplaceholder.typicode.com/users').then(function (result) {
                        //使用值用result.body
                        console.log(result.body)
                    });
                },
                postInfo(){//注意：有些服务器会限定只能是表单提交，所以要加上配置emulateJSON:true
                    this.$http.post('http://jsonplaceholder.typicode.com/users',{},{
                        emulateJSON:true
                    }).then(result => {
                        console.log(result)
                    })
                },
                jsonInfo(){
                    //jsonp解决跨域请求，是创建了一个script 在src中请求服务器，并返回值的
                    this.$http.jsonp('http://jsonplaceholder.typicode.com/users').then(result => {
                        console.log(result.body);
                    })
                },
            }
        });

    </script>
</body>
</html>